<template>
<!--预算执行-->
  <div>
    <div id="budgetEnforcementChart" style="width: 100%;height:215px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "budgetEnforcement",
  data(){
    return {
      budgetEnforcementChart: null,
    }
  },
  props: {
    activeName: {
      type: String,
      default: '1'
    }
  },
  watch: {
    activeName() {
      this.$nextTick(() => {
        this.budgetEnforcementChart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChartTwo()
    })
  },
  methods: {
    initChartTwo(){
      let ctx = document.getElementById('budgetEnforcementChart')
      this.budgetEnforcementChart = echarts.init(ctx)
      this.budgetEnforcementChart.setOption({
        legend: {
          icon: 'circle',
          top: '5%',
          left: 'center',
          orient: 'horizontal', //图例方向【horizontal/vertical】
          itemHeight: 18, //修改icon图形大小
          itemWidth: 18, //修改icon图形大小
          selectedMode: false, //不允许点击图例
          itemGap: 30,
          textStyle: {
            fontSize: 14,
            color: 'black',
          },
          data: ['支出金额', '预算金额'],
        },
        tooltip: {},
        xAxis: {
          data: ['材料成本', '人工成本', '商务费用', '差旅费用']
        },
        yAxis: {
          type: 'value'
        },
        backgroundColor: '#ffffff',
        color: ['#66E1DF', '#66E193'],
        series: [
          {
            name: '支出金额',
            type: 'bar', // 柱状图
            data: [5, 20, 36, 10]
          },
          {
            name: '预算金额',
            type: 'line', // 折线图
            data: [Number('100.00'),Number('100.00'),Number('10.00'),Number('10.00')]
          }
        ]
      })
      window.addEventListener('resize',()=>{
        this.budgetEnforcementChart.resize()
      })
    },
  }
}
</script>

<style scoped>

</style>
